<template>
	<view >
		<block v-if="transferType == 'banner'">
			<ad style="width: 100%;height: 100%;" adpid="1473457466" :ad-height="160" @load="onload" @close="onclose"
				@error="onerror"></ad>
		</block>
		<block v-else-if="transferType=='window'">
			<ad-interstitial ref="adInterstitial" adpid="1043025264" :loadnext="true" @close="adInterstitialClose">
				<view v-if="error">{{error}}</view>
			</ad-interstitial>
		</block>
		<block v-else-if="transferType == 'video'">
			<ad-rewarded-video ref="adRewardedVideo" adpid="1216722162" :loadnext="true"
				v-slot:default="{loading, error}" @load="onVideoAdload" @close="onVideoAdclose" @error="onVideoAderror">
				<slot />
				<view v-if="error">{{error}}</view>
			</ad-rewarded-video>
		</block>
		<block v-else-if="transferType == 'bottom'">
			<view 
				class="tn-footerfixed"
				 @click="showModal">
				<ad style="width: 100%;height: 100%;" adpid="1473457466" :ad-height="100" @load="onload" @close="onclose"
					@error="onerror"></ad>
			</view>

		</block>
	</view>
</template>

<script>
	import Dialog from '@/wxcomponents/vant/dialog/dialog'
	import {
		imageSetting
	} from '@/common/utils.js'
	import {
		BannerBannerList
	} from '@/api/home.js'
	import {
		ad_banner
	} from '@/common/config.js'

	export default {
		components: {

		},
		data() {
			return {
				viewAdShow: false,

			}
		},
		props: {
			transferType: {
				type: String,
				default: 'banner'
			}
		},

		onLoad() {
			console.log('页面加载')

		},
		onShow() {
			console.log('页面显示')
		},
		onReady() {
			// 1. 初始化 视频广告
			if (this.$refs.adRewardedVideo && this.transferType == 'video') {
				this.$refs.adRewardedVideo.load();
			}
		},
		onHide() {
			console.log('页面隐藏')
		},
		onUnload() {
			console.log('页面卸载')
		},
		onBackPress() {
			console.log('页面返回...')
		},
		onShareAppMessage() {
			console.log('分享!')
		},
		onReachBottom() {
			console.log('下拉加载...')
		},
		onPageScroll() {
			console.log('页面滚动...')
		},
		onPullDownRefresh() {

		},


		methods: {
			open() {
				if (this.$refs.adInterstitial) {
					this.$refs.adInterstitial.show();
				}


				if (this.$refs.adRewardedVideo) {
					this.$refs.adRewardedVideo.show();
				}
			},

			adInterstitialClose() {
				this.viewAdShow = false;
				this.$emit('actionEventManager', 'close');
			},

			onload(e) {
				console.log("onload");
			},
			onclose(e) {
				console.log("onclose: " + e.detail);
			},
			onerror(e) {
				
				console.log("onerror: " + e.detail.errCode + " message:: " + e.detail.errMsg);
			},




			//////////////////////////////信息流
			onVideoAdload(e) {
				console.log('广告数据加载成功');
			},
			onVideoAdclose(e) {
				const detail = e.detail
				// 用户点击了【关闭广告】按钮
				if (detail && detail.isEnded) {
					// 正常播放结束
					this.$emit('actionEventManager', 'close', true);
				} else {
					// 播放中途退出
					
					if (process.env.NODE_ENV === 'development') {
					    this.$emit('actionEventManager', 'close', true);
					} else {
					    
						this.$emit('actionEventManager', 'close', false);
					}
				}
			},
			onVideoAderror(e) {
				// 广告加载失败
				console.log("onaderror: ", e.detail);
			}

		}
	}
</script>

<style lang='scss' scoped>
	/* 底部悬浮按钮 start*/
	.tn-tabbar-height {
		min-height: 120rpx;
		height: calc(140rpx + env(safe-area-inset-bottom) / 2);
	}

	.tn-footerfixed {
		position: fixed;
		background-color: rgba(255, 255, 255, 0.5);
		box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
		bottom: 0;
		width: 100%;
		transition: all 0.25s ease-out;
		will-change: transform;
		z-index: 100;
	}
</style>